<template>
  <div class="com-container">
      <!-- 地区销售排行图表 -->
      <div class=" com-chart" ref="rank_ref"></div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            chartsInstance:null,
            allData:null,
            startValue:0,//区域缩放的起点值
            endValue:9,//区域缩放的终点值
            timerID:null //定时器的标识
        }
    },
    mounted(){
        this.initChart()
        this.getData()
        window.addEventListener('resize',this.screenAdapter)
        this.screenAdapter()
    },
    destroyed (){
        window.addEventListener('resize',this.screenAdapter)
        clearInterval(this.timerID)
    },
    methods:{
        initChart(){
            this.chartsInstance = echarts.init(this.$refs.rank_ref,'chalk')
            const initOption = {
                title:{
                    text:'┃ 地区销售排行',
                    left:20,
                    top:20,
                },
                grid:{
                    top:'40%',
                    left:'5%',
                    right:'5%',
                    bottom:'8%',
                    containLabel:true
                },
                tooltip:{
                    show:true
                },
                xAxis :{
                    type:'category'
                },
                yAxis:{
                    type:'value'
                },
                series:[
                    {
                        type:'bar'
                    }
                ]
            }
            this.chartsInstance.setOption(initOption) 
            this.chartsInstance.on('mouseover',()=>{
                clearInterval(this.timerID)
            })
            this.chartsInstance.on('mouseout',()=>{
                 this.startInterval()
            })
           
        },
        async getData(){
            //来获取服务器的数据 ，对this。alldat进行赋值之后，调用upaterchert方法更新图表
            const {data:ret} = await this.$http.get('rank')
            this.allData = ret
            //对alldata 进行从大到小的排序
            this.allData.sort((a,b)=>{
                return b.value-a.value
            })
            console.log(this.allData);
            this.updateChart()
            this.startInterval()
        },
        updateChart(){
            const colorArr = [
                ['#0BA82C','#4FF778'],
                ['#2E72BF','#23E5E5'],
                ['#5052EE','#AB6EE5']
            ]
            //处理图表需要的数据
            //所有省份所生成的数组
            const provinceArr = this.allData.map(item =>{
                return item.name
            })
            //所有省份对应的销售金额
            const valueArr = this.allData.map(item=>{
                return item.value
            })
            const dataOption = {
                xAxis:{
                    data:provinceArr
                },
                dataZoom:{
                    show:false,
                    startValue:this.startValue,
                    endValue:this.endValue,
                },
                series:[
                    {
                    data:valueArr,
                    itemStyle:{
                        color:arg =>{
                            let targetColorArr = null
                            if(arg.value>300){
                                targetColorArr = colorArr[0]
                            }else if(arg.value>200){
                                targetColorArr = colorArr[1]
                            }else {
                                targetColorArr = colorArr[2]                               
                            }
                            return {
                                     type: "linear",
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [
                                            {
                                            offset:0,
                                            color:targetColorArr[0]// 0% 处的颜色
                                            },
                                            {
                                            offset:1,
                                            color:targetColorArr[1]  // 100% 处的颜色
                                            }
                                        ],
                                        globalCoord: false
                                }
                        }
                    }
                    }
                ]
            }
            this.chartsInstance.setOption(dataOption)
        },
        screenAdapter(){
            const titleFontSize = this.$refs.rank_ref.offsetWidth / 100 * 3.6
            const adapterOption = {
                title:{
                    textStyle:{
                        fontSize:titleFontSize
                    }
                },
                series:[
                    {
                        barWidth:titleFontSize,
                        itemStyle:{
                            barBorderRadius:[titleFontSize / 2,titleFontSize / 2,0,0]
                        }
                    }
                ]
            }
            this.chartsInstance.setOption(adapterOption)
            this.chartsInstance.resize()
        },
        startInterval(){
            if(this.timerId){
                clearInterval(this.timerId)
            }
            this.timerId =  setInterval(()=>{
                this.startValue++
                this.endValue++
                if(this.endValue>this.allData.length-1){
                    this.startValue =0
                    this.endValue = 9
                }
                this.updateChart()
            },2000)
        }
    },
    
    
}
</script>

<style>

</style>